import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:todo_app/constants/Screen.dart';
import 'package:todo_app/layout/Gaps.dart';
import 'package:todo_app/utils/AppNavigator.dart';
import 'package:todo_app/utils/ExtHelper.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

showPreviewImage({
  required BuildContext context,
  required String path
}) {
  AppNavigator.push('/previewImage', extra: path);
}


showPreviewImages({
  required BuildContext context,
  required List<String> urls
}) {
  AppNavigator.push('/previewImages', extra: urls);
}


class PreviewImage extends HookWidget {

  final String photoURL;

  const PreviewImage({super.key, required this.photoURL});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(children: [
        PhotoView(
          imageProvider: CachedNetworkImageProvider(photoURL),
          heroAttributes: PhotoViewHeroAttributes(tag: "preview_${photoURL.ossPreview()}"),
        ),
        Positioned(
          left: Screen.sizeByDesign(15),
          top: Screen.sizeByDesign(50),
          child: GestureDetector(
            onTap: () {
              Navigator.of(context).pop();
            },
            child: Icon(
              Icons.arrow_back_rounded,
              color: Colors.white,
              size: 22.dp,
            ),
          )
        )
      ],
    ));
  }
}



class PreviewImages extends HookWidget {
  final List<String> urls;
  final int index;
  const PreviewImages({super.key, required this.urls, this.index = 0});
  
  @override
  Widget build(BuildContext context) {
    List<PhotoViewGalleryPageOptions> options = urls.map((img) {
      return PhotoViewGalleryPageOptions(
        imageProvider: CachedNetworkImageProvider(img),
        heroAttributes: PhotoViewHeroAttributes(tag: img.ossPreview()),
      );
    }).toList();
    var pageController = usePageController(initialPage: index, keys: [urls, index]);
    var pageIndex = useState(index);
    return Scaffold(
        backgroundColor: Colors.black,
        body: Stack(
          children: [
          PhotoViewGallery(
            pageOptions: options,
            backgroundDecoration: const BoxDecoration(
              color: Colors.black
            ),
            loadingBuilder: (context, progress) => Center(
              child: SizedBox(
                width: 20.0.dp,
                height: 20.0.dp,
                child: CircularProgressIndicator(
                  backgroundColor: Colors.black,
                  value: progress == null || progress.expectedTotalBytes != null
                      ? null
                      : progress.cumulativeBytesLoaded / progress.expectedTotalBytes!,
                ),
              ),
            ),
            pageController: pageController,
            onPageChanged: (index) {
              pageIndex.value = index;
            },
          ),
        Positioned(
          left: Screen.sizeByDesign(15),
          top: Screen.sizeByDesign(50),
          child: GestureDetector(
            onTap: () {
              Navigator.of(context).pop();
            },
            child: Icon(
              Icons.arrow_back_rounded,
              color: Colors.white,
              size: 22.dp,
            ),
          )
        ),
        Positioned(
          left: Screen.sizeByDesign(15),
          right: Screen.sizeByDesign(15),
          bottom: Screen.sizeByDesign(50),
          child: Text(
            "${pageIndex.value + 1}/${urls.length}",
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 22.dp,
              color: Colors.white,
              shadows: const [BoxShadow(color: Color(0x80000000))]
            ),
          )
        )
      ],
    ));
  }
}
